<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>苹果风格卡片生成器</title>
  <style>
    body {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
      background: #f5f5f7;
      margin: 0;
      padding: 20px;
    }
    h1 {
      text-align: center;
      color: #333;
      margin-bottom: 20px;
    }
    .form {
      background: #fff;
      padding: 20px;
      border-radius: 16px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      margin-bottom: 20px;
    }
    .form label {
      display: block;
      margin-bottom: 6px;
      color: #666;
      font-size: 14px;
    }
    .form input, .form textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 12px;
      border: 1px solid #ddd;
      border-radius: 10px;
      font-size: 14px;
    }
    .btn {
      padding: 10px 18px;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      margin-right: 8px;
      font-weight: 500;
      transition: 0.2s;
    }
    .btn-primary {
      background: #007aff;
      color: white;
    }
    .btn-primary:hover {
      background: #005bbb;
    }
    .btn-secondary {
      background: #f2f2f7;
      color: #333;
    }
    .btn-secondary:hover {
      background: #e5e5ea;
    }
    .btn-success {
      background: #34c759;
      color: white;
    }
    .btn-success:hover {
      background: #2aa94f;
    }
    .card-container {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      justify-content: center;
    }
    .card {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 4px 20px rgba(0,0,0,0.1);
      padding: 20px;
      width: 250px;
      text-align: center;
      position: relative;
      border: 2px solid #f0f0f0; /* 导出时会显示 */
    }
    .card h2 {
      font-size: 18px;
      margin-bottom: 10px;
      color: #333;
    }
    .card p {
      font-size: 14px;
      color: #666;
    }
    .export-btn {
      position: absolute;
      top: 10px;
      right: 10px;
      background: #34c759;
      color: #fff;
      font-size: 12px;
      padding: 5px 8px;
      border-radius: 8px;
      cursor: pointer;
    }
  </style>
</head>
<body>
  <h1>苹果风格卡片生成器</h1>
  <div class="form">
    <label>标题</label>
    <input type="text" id="title" placeholder="输入卡片标题">
    <label>内容</label>
    <textarea id="content" rows="3" placeholder="输入卡片内容"></textarea>
    <button class="btn btn-primary" onclick="addCard()">添加卡片</button>
    <button class="btn btn-secondary" onclick="exportJSON()">导出 JSON</button>
    <button class="btn btn-secondary" onclick="importJSON()">导入 JSON</button>
    <button class="btn btn-success" onclick="exportAllImages()">批量导出图片</button>
  </div>

  <div class="card-container" id="cardContainer"></div>

  <!-- 引入 html2canvas 库 -->
  <script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>

  <script>
    let cards = [];

    function renderCards() {
      const container = document.getElementById('cardContainer');
      container.innerHTML = '';
      cards.forEach((c, i) => {
        const card = document.createElement('div');
        card.className = 'card';
        card.id = 'card-' + i;
        card.innerHTML = `
          <h2>${c.title}</h2>
          <p>${c.content}</p>
          <div class="export-btn" onclick="exportImage(${i})">导出</div>
        `;
        container.appendChild(card);
      });
    }

    function addCard() {
      const title = document.getElementById('title').value.trim();
      const content = document.getElementById('content').value.trim();
      if (!title) return alert("标题不能为空");
      cards.push({ title, content });
      renderCards();
      document.getElementById('title').value = '';
      document.getElementById('content').value = '';
    }

    function exportJSON() {
      const data = JSON.stringify(cards, null, 2);
      const blob = new Blob([data], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = '卡片数据.json';
      a.click();
      URL.revokeObjectURL(url);
    }

    function importJSON() {
      const fileInput = document.createElement('input');
      fileInput.type = 'file';
      fileInput.accept = '.json';
      fileInput.onchange = function(e) {
        const file = e.target.files[0];
        if (file) {
          const reader = new FileReader();
          reader.onload = function(event) {
            try {
              cards = JSON.parse(event.target.result);
              renderCards();
            } catch (err) {
              alert('导入文件格式错误');
            }
          };
          reader.readAsText(file);
        }
      };
      fileInput.click();
    }

    async function exportImage(index) {
      const cardElement = document.getElementById('card-' + index);
      const btn = cardElement.querySelector('.export-btn');
      btn.style.display = 'none'; // 导出时隐藏按钮
      const canvas = await html2canvas(cardElement, { scale: 2, backgroundColor: null });
      btn.style.display = ''; // 恢复按钮
      const dataUrl = canvas.toDataURL('image/png');
      const a = document.createElement('a');
      a.href = dataUrl;
      a.download = `卡片-${index+1}.png`;
      a.click();
    }

    async function exportAllImages() {
      for (let i = 0; i < cards.length; i++) {
        await exportImage(i);
      }
    }
  </script>
</body>
</html>
